// 路由实例
import router, { asyncRoutes } from './router'
// vuex
import store from './store'
// import { Message } from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style

// NProgress.configure({ showSpinner: false }) // NProgress Configuration

// 白名单=> 不需要token也可以访问的页面
const whiteList = ['/login', '/404'] // no redirect whitelist
// 前门保安
/**
 * to 去哪
 * from 从哪来
 * next 是否放行
 */
router.beforeEach(async (to, from, next) => {
  // start progress bar
  NProgress.start()
  if (store.getters.token) {
    // 存在token
    if (to.path === '/login') {
      // 如果再次访问登录页=》回到首页
      next('/')
    } else {
      next() // 访问页面
      /**
       * 获取登录人信息两个条件:
       * 1. 有token
       * 2. 访问页面之前（非必须）
       */
      // 判断当前登录人信息有没有获取过
      if (!store.getters.name) {
        /**
         * js单线程
         * 1. 异步代码会先放到队列
         * 2. 先执行同步代码
         * 3. 等到所有同步代码执行完=》从队列取出所有异步代码执行
         */
        // 异步=》401出错=》阻塞后续代码的执行
        const perms = await store.dispatch('user/getUserInfo')
        // 上一步获取登录人的基本信息（其中包含权限点的标识数据）
        /**
         * 需求：根据获取的权限点的标识数据过滤动态路由=》用户只能访问指定的页面
         * 1. 获取权限点标识
         * 2. 根据登录人的权限标识数据过滤动态路由
         */
        const canLook = asyncRoutes.filter(route => {
          // menus中如果包含当前route的name=》留下
          return perms.menus.includes(route.children[0].name)
        })
        // 存储菜单数据
        store.commit('menus/setMenuList', canLook)
        console.log('当前登录人权限点数据：', perms, canLook)
        // 动态添加路由配置
        router.addRoutes([...canLook, { path: '*', redirect: '/404', hidden: true }])
      }
    }
  } else {
    //  不存在token=>可能访问的是登录页
    if (whiteList.includes(to.path)) {
      next()
    } else {
      // 携带当前要访问的页面路径
      next(`/login?redirect=${to.path}`)
    }
  }
}
)

// 后门保安
router.afterEach(() => {
  // finish progress bar
  NProgress.done()
})
